import type { ResultPanel } from '../types/home'

// 面板组件映射 - 查找components/home目录下的所有Vue组件
const panelComponents = import.meta.glob('../components/home/*.vue')

// 获取面板组件
export async function getPanelComponent(panel: ResultPanel) {
  const componentName = getPanelComponentName(panel.id, panel.conversationType)
  try {
    const component = await panelComponents[`../components/home/${componentName}.vue`]()
    return component.default
  } catch (error) {
    console.warn(`Panel component ${componentName} not found, using default`)
    return (await import('../components/home/DefaultPanel.vue')).default
  }
}

// 获取面板组件名称
export function getPanelComponentName(panelId: number, conversationType: string): string {
  const componentMap: Record<string, Record<number, string>> = {
    knowledge: {
      1: 'KnowledgeAnalysisPanel'
    },
    data: {
      1: 'DataAnalysisPanel',
      2: 'DataSqlPanel',
      3: 'DataQueryPanel',
      4: 'DataProcessingPanel',
      5: 'DataReportPanel'
    },
    image: {
      1: 'ImageRecognitionPanel',
      2: 'ImageExtractionPanel'
    },
    code: {
      1: 'CodeAnalysisPanel'
    }
  }
  
  return componentMap[conversationType]?.[panelId] || 'DefaultPanel'
}

// 面板内容生成器
export const panelContentGenerators = {
  // 知识类型面板
  knowledge: {
    1: (panel: ResultPanel) => generateKnowledgeAnalysisContent(panel)
  },
  // 数据类型面板
  data: {
    2: (panel: ResultPanel) => generateDataSqlContent(panel),
    3: (panel: ResultPanel) => generateDataQueryContent(panel),
    4: (panel: ResultPanel) => generateDataProcessingContent(panel),
    5: (panel: ResultPanel) => generateDataReportContent(panel)
  },
  // 图像类型面板
  image: {
    1: (panel: ResultPanel) => generateImageRecognitionContent(panel),
    2: (panel: ResultPanel) => generateImageExtractionContent(panel)
  },
  // 代码类型面板
  code: {
    1: (panel: ResultPanel) => generateCodeAnalysisContent(panel)
  }
}

// 生成知识分析内容
function generateKnowledgeAnalysisContent(panel: ResultPanel): string {
  return `
    <div class="space-y-3">
      <div class="bg-green-50 p-3 rounded-lg">
        <h4 class="font-medium text-green-800 mb-2">解析结果</h4>
        <div class="text-sm text-green-700 space-y-1">
          <div>✓ 问题类型：环境监测专业知识查询</div>
          <div>✓ 查询对象：深圳监测站铜分析方法</div>
          <div>✓ 信息深度：需要详细技术参数和标准依据</div>
          <div>✓ 输出格式：结构化方法列表</div>
        </div>
      </div>
      <div class="bg-blue-50 p-3 rounded-lg">
        <h4 class="font-medium text-blue-800 mb-2">关键实体识别</h4>
        <div class="text-sm text-blue-700">
          <div class="flex flex-wrap gap-2">
            <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">深圳监测站</span>
            <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">地表水</span>
            <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">铜</span>
            <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">分析方法</span>
          </div>
        </div>
      </div>
    </div>
  `
}

// 生成数据SQL内容
function generateDataSqlContent(panel: ResultPanel): string {
  return `
    <div class="space-y-3">
      <div class="border-l-4 border-blue-400 pl-4">
        <h4 class="font-medium text-slate-800">SQL查询语句</h4>
        <div class="bg-slate-100 p-3 rounded mt-2">
          <code class="text-sm text-slate-700">
            SELECT date, aqi_value, station_name<br>
            FROM air_quality_data<br>
            WHERE station_name LIKE '%深圳%'<br>
            AND date >= DATE_SUB(CURRENT_DATE(), INTERVAL 30 DAY)<br>
            ORDER BY date ASC;
          </code>
        </div>
      </div>
    </div>
  `
}

// 生成数据报告内容
function generateDataReportContent(panel: ResultPanel): string {
  return `
    <div class="space-y-4">
      <!-- 图表容器 -->
      <div class="mb-6">
        <canvas id="aqiChart" width="400" height="250"></canvas>
      </div>
      
      <!-- 统计卡片 -->
      <div class="grid grid-cols-2 gap-4 mb-6">
        <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-4 rounded-lg">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm text-slate-600">平均AQI</p>
              <p class="text-2xl font-bold text-indigo-600">58.2</p>
            </div>
            <i class="fas fa-chart-bar text-indigo-400 text-2xl"></i>
          </div>
        </div>
        <div class="bg-gradient-to-br from-green-50 to-emerald-50 p-4 rounded-lg">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm text-slate-600">优良天数</p>
              <p class="text-2xl font-bold text-green-600">100%</p>
            </div>
            <i class="fas fa-leaf text-green-400 text-2xl"></i>
          </div>
        </div>
      </div>
      
      <!-- 分析结论 -->
      <div class="bg-gradient-to-r from-purple-50 to-indigo-50 border border-purple-200 rounded-lg p-5">
        <h4 class="font-semibold text-purple-800 mb-3">AQI趋势分析报告</h4>
        <div class="text-sm text-purple-700 space-y-2">
          <div class="flex items-start space-x-2">
            <i class="fas fa-arrow-up text-purple-500 mt-0.5"></i>
            <p>深圳空气质量整体良好，AQI控制在优秀范围内</p>
          </div>
          <div class="flex items-start space-x-2">
            <i class="fas fa-arrow-down text-purple-500 mt-0.5"></i>
            <p>30天内全部达到优良标准，空气质量持续改善</p>
          </div>
          <div class="flex items-start space-x-2">
            <i class="fas fa-check text-purple-500 mt-0.5"></i>
            <p>无明显污染事件，环境治理成效显著</p>
          </div>
          <div class="flex items-start space-x-2">
            <i class="fas fa-info text-purple-500 mt-0.5"></i>
            <p>主要污染物为PM2.5，建议加强工业排放管控</p>
          </div>
        </div>
      </div>
    </div>
  `
}

// 其他生成函数...
function generateDataQueryContent(panel: ResultPanel): string {
  return '<div>数据查询内容</div>'
}

function generateDataProcessingContent(panel: ResultPanel): string {
  return '<div>数据处理内容</div>'
}

function generateImageRecognitionContent(panel: ResultPanel): string {
  return '<div>图像识别内容</div>'
}

function generateImageExtractionContent(panel: ResultPanel): string {
  return '<div>数据提取内容</div>'
}

function generateCodeAnalysisContent(panel: ResultPanel): string {
  return '<div>代码分析内容</div>'
}